<!-- 申请信用卡详情 -->
<template>
    <div>
        <van-nav-bar
        :title="item.title"
        left-text=""
        fixed
        placeholder
        />
        <div class="img">
            <img :src="item.imgUrl" alt="">
        </div>
        <div class="btn" @click="show = true">立即申请</div>
        <van-popup v-model:show="show" round>
            <div class="showItem">
                <div class="showItemTitle">温馨提示</div>
                <div class="showItemDesc">
                    <!-- <span>稍后填写的申请表单</span>
                    <span class="themeColor">须和此信息一致！</span>
                    <span>否则无法与银行核对订单影响佣金结算。</span> -->
                    <div>1、建议当月申请不超过3次。</div>
                    <div>2、评分<span class="themeColor">建议通过</span>的再申请尤佳，评分若较低过段时间申请</div>
                </div>
                <div style="height: 10px"></div>
                <van-field v-model="name" label="姓名：" placeholder="请输入姓名" clearable/>
                <div style="height: 10px"></div>
                <van-field v-model="idNo" type="number" label="身份证：" placeholder="请输入身份证号码" clearable/>
                <div style="height: 10px"></div>
                <van-field v-model="phone" type="tel" label="手机：" placeholder="请输入手机号码" clearable/>
                <div style="height: 20px"></div>
                <van-button type="primary" round block @click="apply">立即申请</van-button>
            </div>
        </van-popup>
    </div>
</template>

<script>
import { ref, reactive, getCurrentInstance } from 'vue';
import { NavBar , Popup , Field , Button } from 'vant';
import { ACCESS_TOKEN , BRANDID } from '@/utils/types';
import storage from 'store';
export default {
    components:{
        [NavBar.name]:NavBar,
        [Popup.name]:Popup,
        [Field.name]:Field,
        [Button.name]:Button,
    },
    setup() {
        const { proxy } = getCurrentInstance();
        storage.clearAll();
        const tokenKey = proxy.getHashParam('key');
        const getToken = () => {
            proxy.$http.brandApi.getRequestParams(tokenKey)
            .then(res=>{
                console.log(res,'res')
                if(res.success){
                    storage.set(ACCESS_TOKEN,res.data.split('&')[0])
                    getBanner(res.data.split('&')[1],res.data.split('&')[2]);
                }else{
                    proxy.$toast({position: 'bottom',message:res.errMessage})
                }
            })
        }
        getToken()

        // 获取信用卡数据
        function getBanner(id,title){
            proxy.$http.brandApi.queryAppInforMtion({infoType: 17,page : 0, size: 10,id:id,title: title})
            .then(res=>{
                console.log(res,'res')
                if(res.success){
                    if(res.data.content.length == 1){
                        item.value = res.data.content[0];
                    }else{
                        res.data.content.forEach(items=>{
                            if(items.id == id){
                                item.value = items
                            }
                        })
                    }
                }else{
                    proxy.$toast({position: 'bottom',message:res.errMessage})
                }
            })
        }

        const show = ref(false);
        const name = ref(''); // 姓名
        const idNo = ref(''); // 身份证号码
        const phone = ref(''); // 手机号码
        const item = ref({});

        // 申请信用卡
        const apply = () => {
            if(name.value == ''){
                proxy.$toast({message: '请输入姓名',position: 'bottom'});
                return;
            }
            if(idNo.value == '' || idNo.value.length != 18){
                proxy.$toast({message: '请输入正确的身份证号码',position: 'bottom'});
                return;
            }
            if(phone.value == '' || phone.value.length != 11){
                proxy.$toast({message: '请输入正确的手机号码',position: 'bottom'});
                return;
            }
            proxy.$http.brandApi.applyCardRecord(name.value,item.value.title,idNo.value,phone.value)
            .then(res=>{
                if(res.success){
                    location.href = item.value.jumpUrl;
                }else{
                    proxy.$toast({position: 'bottom',message:res.errMessage})
                }
            })
        }

        return {
            item,
            show,
            name,
            idNo,
            phone,
            apply,
        }
    }
}

</script>
<style scoped>
.img img{
    width: 100%;
    display: inline-block;
}
.btn{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 888;
    height: 45px;
    background: var(--themeColor);
    line-height: 45px;
    text-align: center;
    font-size: 17px;
    color: #FFFFFF;
    font-weight: 500;
}

.showItem{
    width: 320px;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 19px 17px;
    box-sizing: border-box;
}
.showItemTitle{
    font-size: 18px;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    text-align: center;
}
.showItemDesc{
    font-size: 14px;
    color: rgba(51, 51, 51, 1);
}
</style>